<template>
  <div class="editor2">
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text"></div>
  </div>
</template>
<script>
  import { upload } from "@/api/webpage"
  import E from "wangeditor";
  export default {
    name: "editor",
    data() {
      return {
        editor: null,
        info_: null,
      };
    },
    props: {
      value: {
        type: String,
        default: "",
      },
      isClear: {
        type: Boolean,
        default: false,
      },
    },
    watch: {
      isClear(val) {
        // 触发清除文本域内容
        if (val) {
          this.editor.txt.clear();
          this.info_ = null;
        }
      },
      value: function (value) {
        if (value !== this.editor.txt.html()) {
          this.editor.txt.html(this.value);
        }
      },
    },
    mounted() {
      this.seteditor();
      this.editor.txt.html(this.value);
    },
    methods: {
      seteditor() {
        this.editor = new E(this.$refs.toolbar, this.$refs.editor);
        this.editor.config.onchange = (html) => {
          this.info_ = html// 绑定当前逐渐地值
          this.$emit("editorchange", this.info_);
        };
        this.editor.config.uploadImgShowBase64 = false
        this.editor.config.uploadVideoServer = 'uploadVideo'
        // this.editor.config.fontsizes  = {}
        this.editor.config.customUploadImg = function (files, insert) {
          const file = new FormData()
          file.append('file',files[0])
          upload(file).then(res => {
            insert(process.env.VUE_APP_BASE_HOST+'/show'+res.data[0].address)
          })
        }
        this.editor.config.customUploadVideo = function (files, insert) {
          const file = new FormData()
          file.append('file',files[0])
          upload(file).then(res => {
            insert(process.env.VUE_APP_BASE_HOST+'/show'+res.data[0].address)
          })
        }
        this.editor.config.colors = [
          '#000000',
          '#eeece0',
          '#1c487f',
          '#4d80bf'
        ]

        this.editor.config.fontSizes = {
          'x-small': { name: '五号', value: '1' },
          'small': { name: '小四', value: '2' },
          'normal': { name: '四号', value: '3' },
          'large': { name: '小三', value: '4' },
          'x-large': { name: '三号', value: '5' },
          'xx-large': { name: '小二 ', value: '6' },
          'xxx-large': { name: '二号', value: '7' }
        }
        // 配置字体
        this.editor.config.fontNames = [
          '宋体',
          '仿宋',
          '楷体',
          '华文仿宋',
          '华文楷体',
          '微软雅黑',
        ]
        this.editor.config.menus = [
          // 'head',
          'fontName',
          'fontSize',
          'bold',
          'italic',
          'underline',
          // 'strikeThrough',
          // 'indent',
          // 'lineHeight',
          'foreColor',
          // 'backColor',
          // 'link',
          // 'list',
          // 'todo',
          'justify',
          // 'quote',
          // 'emoticon',
          'image',
          'video',
          'table',
          // 'code',
          'splitLine',
          'undo',
          'redo',
        ]
        this.editor.config.uploadImgMaxSize = 2048 * 1024 * 1024 // 2048M 默认限制5M

        this.editor.create();

      },
    },
  };
</script>
<style scoped>
  .editor2 {
    width: 100%;
    margin: 0px auto;
    position: relative;
    border: 1px solid #ccc;
    z-index: 100;
    min-height: 400px;
  }
  .editor2 .toolbar {
    background-color: #f1f1f1!important;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
  }
  .editor2 .text {
    z-index: auto !important;
  }
  .editor2 .text .w-e-panel-container {
    z-index: 999;
    left: -1px;
    width: 100% !important;
    margin-left: 0 !important;
  }
  .editor2 .text  .w-e-text {
    min-height: 450px;
    overflow-y: auto;
  }
</style>
